<template>
    <div class="login-page">
        <div class="login-from">
            <h3>注册</h3>
            <a-form :form="form" class="login-form" @submit="handleSubmit">
                <a-form-item>
                    <a-input
                        v-decorator="[
                            'userName',
                            { rules: [{ required: true, message: '请输入用户名' }] },
                        ]"
                        placeholder="用户名" >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input
                        v-decorator="[ 'password', { rules: [{ required: true, message: '请输入密码' }] } ]"
                        type="password"
                        placeholder="密码">
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input
                        v-decorator="[ 'password', { rules: [{ required: true, message: '请输入密码' }] } ]"
                        type="password"
                        placeholder="确认密码">
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <!-- <a-form-item>
                    <a-input-group compact>
                        <a-select default-value="Option1">
                            <a-select-option value="Option1">+86</a-select-option>
                            <a-select-option value="Option2">+87</a-select-option>
                        </a-select>
                        <a-input style="width: 199px" placeholder="手机号" />
                    </a-input-group>
                </a-form-item>
                <a-form-item>
                    <div style="display: flex">
                        <a-input v-decorator="[ 'captcha', { rules: [{ required: true, message: 'Please input the captcha you got!' }] } ]"/>
                        <a-button style="margin-left: 10px">获取验证码</a-button>
                    </div>
                </a-form-item> -->
                <a-form-item>
                    <a-button type="primary" html-type="submit" class="login-form-button">注册</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            formItemLayout: {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                }
            }
        }
    },
    beforeCreate () {
        this.form = this.$form.createForm(this, {
            name: 'normal_login'
        })
    },
    methods: {
        handleSubmit (e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.login-page {
    .login-from {
        background: #fff;
        box-shadow: 0 0 100px rgba(0, 0, 0, .1);
        padding: 40px 30px;
        position: fixed;
        width: 320px;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }
    h3 {
        margin-bottom: 10px;
    }
    .login-form-forgot {
        float: right;
    }
    .login-form-button {
        width: 100%;
    }
}
</style>
